<!DOCTYPE html>
<html lang="en">
<head>
        
    <meta charset="UTF-8">
        <title>代码生成工具</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 引入样式 -->
        
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>


</head>
<body>
<div id="app">
        
       <div id="luckysheet" style="width:100%;height:96%;right: 0px;top: 0px;"></div>

</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                // tableData: []
            }
        },
        mounted() {
            this.init();
        },
        methods:{
            init() {

                const options = {
                    container: 'luckysheet', // luckysheet为容器id
                    lang: 'zh',
                    showinfobar: false, // 标题部分信息
                    showsheetbar: false, // 底部sheet页
                    sheetFormulaBar: true, // 是否显示公示栏
                    showstatisticBar: false, // 自定义计数栏
                    showtoolbar: false, // 默认工具栏都不显示
                    enableAddRow: false, // 底部添加行按钮
                    showtoolbarConfig: { // 自定义配置工具栏
                        undoRedo: true, // 撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
                        paintFormat: true, // 格式刷
                        mergeCell: true // '合并单元格'
                    },
                    cellRightClickConfig: { // 自定义右键单元格
                        insertColumn: false,
                        deleteColumn: false,
                        hideRow: false,
                        hideColumn: false,
                        deleteCell: false,
                        sort: false,
                        filter: false, // 筛选选区
                        chart: false, // 图表生成
                        image: false, // 插入图片
                        link: false, // 插入链接
                        data: false,
                        matrix: false
                    },
                    enableAddBackTop: false
                }
                luckysheet.destroy();
                // 初始化表格
                luckysheet.create(options) //  此处的luckysheet为上面div容器的id

            }
        }

    })
</script>
</body>
</html>